<script lang="ts" setup>
interface Props {
  text: string
  icon?: string
  type?: "primary" | "success" | "warning" | "danger" | "info" | "default" | "paid-user" | "trial-active" | "trial-expired" | "version-standard" | "version-pro" | "version-pro-max"
  color?: string
  backgroundColor?: string
  size?: "small" | "default" | "large" | "medium"
  round?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: "default",
  size: "default",
  round: false
})

// 计算样式
const computedStyle = computed(() => {
  const style: Record<string, string> = {}

  if (props.color) {
    style.color = props.color
  }

  if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor
    style.borderColor = props.backgroundColor
  }

  return style
})

// 计算类名
const computedClass = computed(() => {
  const classes = ["custom-tag"]

  if (props.size !== "default") {
    classes.push(`custom-tag--${props.size}`)
  }

  if (props.round) {
    classes.push("custom-tag--round")
  }

  if (!props.backgroundColor && !props.color) {
    classes.push(`custom-tag--${props.type}`)
  }

  return classes
})
</script>

<template>
  <span :class="computedClass" :style="computedStyle">
    <el-icon v-if="icon" class="tag-icon">
      <component :is="icon" />
    </el-icon>
    <span class="tag-text">{{ text }}</span>
  </span>
</template>

<style lang="scss" scoped>
.custom-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #f9fafb;
  color: #374151;
  white-space: nowrap;

  .tag-icon {
    font-size: 12px;
    margin-right: 4px;
  }

  .tag-text {
    font-weight: 500;
  }

  // 尺寸变体
  &--small {
    padding: 2px 6px;
    font-size: 11px;

    .tag-icon {
      font-size: 10px;
      margin-right: 2px;
    }
  }

  &--medium {
    padding: 4px 8px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;

    .tag-icon {
      font-size: 13px;
      margin-right: 4px;
    }
  }

  &--large {
    padding: 6px 12px;
    font-size: 14px;

    .tag-icon {
      font-size: 14px;
      margin-right: 6px;
    }
  }

  // 圆角变体
  &--round {
    border-radius: 20px;
  }

  // 类型变体
  &--primary {
    background-color: #dbeafe;
    border-color: #dbeafe;
    color: #1e40af;
  }

  &--success {
    background-color: #dcfce7;
    border-color: #dcfce7;
    color: #166534;
  }

  &--warning {
    background-color: #fef3c7;
    border-color: #fef3c7;
    color: #92400e;
  }

  &--danger {
    background-color: #fee2e2;
    border-color: #fee2e2;
    color: #dc2626;
  }

  &--info {
    background-color: #e5e7eb;
    border-color: #e5e7eb;
    color: #374151;
  }

  // 专用颜色变体 - 精确匹配截图颜色
  &--paid-user {
    background-color: #8b21f1; // 付费用户
    border-color: #8b21f1;
    color: #ffffff;
  }

  &--trial-active {
    background-color: #2d5cf2; // 试用中
    border-color: #2d5cf2;
    color: #ffffff;
  }

  &--trial-expired {
    background-color: #c33142; // 试用已过期
    border-color: #c33142;
    color: #ffffff;
  }

  &--version-standard {
    background-color: #ffffff; // 标准版 - 白色背景
    border-color: #e5e7eb;
    color: #0a0a0a; // 深色字体
  }

  &--version-pro {
    background-color: #030212; // Pro版 - 深蓝色背景
    border-color: #030212;
    color: #ffffff; // 白色字体
  }

  &--version-pro-max {
    background-color: #edeef2; // Pro Max版 - 浅灰色背景
    border-color: #edeef2;
    color: #030212; // 深色字体
  }
}
</style>
